<template>
	<view class="contain-box" v-if="!is_preview">
		<view>
			<image src="/static/icon/left.png" class="left-icon" @click="backToLast"></image>
		</view>
		<view class="create-title">{{$t('create.title1')}}</view>
		<!-- 上传图片 -->
		<view>
			<up-upload accept="image" uploadIcon="/static/icon/addImg.png" multiple :fileList="fileList"
				@afterRead="afterRead" @delete="deletePic" name="1" :maxCount="9">
				<view class="uploda-btn">
					<image src="/static/icon/addImg.png" class="add-icon"></image>
				</view>
			</up-upload>
		</view>
		<!-- 添加标题 -->
		<view class="create-title">{{$t('create.title2')}}</view>
		<view>
			<input type="text" v-model="title" class="input-title" :placeholder="t('blurb.comment.textarea')" />
		</view>

		<!-- 添加描述 -->
		<view class="create-title">{{$t('create.title3')}}</view>
		<view>
			<textarea v-model="desc" type="text" class="input-decs" :placeholder="t('blurb.comment.textarea')" />
		</view>

		<view class="bottom-box">
			<view class="preview-box" @click="shiftPreview">
				<image src="/static/icon/preview.png" class="preview-icon"></image>
				<view class="preview-tetx">{{$t('create.btn1')}}</view>
			</view>
			<view>
				<button class="publish-btn" @click="publish">{{$t('create.btn2')}}</button>
			</view>
		</view>
	</view>
	<view v-else>
		<preview :desc="desc" :title="title" :fileList="fileList" @closePreview="close"></preview>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useI18n } from 'vue-i18n'
	import preview from '@/components/preview.vue'
	
	const { t } = useI18n()
	const is_preview = ref(false)
	const title = ref<string>('')
	const desc = ref<string>('')
	// 显示已上传的文件列表
	const fileList = ref([]);

	// 删除图片
	const deletePic = (event : any) => {
		fileList.value.splice(event.index, 1);
	};

	// 新增图片
	const afterRead = async (event : any) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = lists[i].url;
			let item = fileList.value[fileListLen + i];
			// 使用 let 块级作用域避免闭包问题
			setTimeout(() => {
				fileList.value.splice(fileListLen + i, 1, {
					...item,
					status: 'success',
					message: '',
					url: result,
				});
			}, 1000);
		}
	};

	const backToLast = () => {
		uni.switchTab({
			url:'/pages/home/home'
		})
	}
	const shiftPreview = () => {
		is_preview.value = true
	}
	const close=()=>{
		is_preview.value = false
	}
	const publish = () => {
		console.log(publish)
	}
</script>

<style lang="scss" scoped>
	.contain-box {
		height: 100%;
		padding: 0.5rem;
		box-sizing: border-box;
		background-color: #fff;
	}

	.left-icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.create-title {
		width: 3rem;
		height: 1.06rem;
		line-height: 1.06rem;
		color: rgba(16, 16, 16, 0.8);
		font-size: 0.75rem;
		text-align: left;
		margin: 0.5rem;
	}

	.uploda-btn {
		width: 5.38rem;
		height: 5.38rem;
		line-height: 5.5rem;
		border-radius: 0.63rem;
		background-color: rgba(194, 194, 194, 1);
		text-align: center;
		padding: 0;
	}

	.add-icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.input-title {
		width: 22.25rem;
		height: 2.13rem;
		border-radius: 0.63rem;
		background-color: rgba(194, 194, 194, 1);
		font-size: 0.88rem;
		padding: 0.2rem 0.8rem;
		box-sizing: border-box;
	}

	.input-decs {
		width: 22.25rem;
		height: 6.25rem;
		border-radius: 0.63rem;
		background-color: rgba(194, 194, 194, 1);
		font-size: 0.88rem;
		padding: 0.2rem 0.8rem;
		box-sizing: border-box;
	}

	.bottom-box {
		position: absolute;
		bottom: 0;
		// background-color: #273;
		width: calc(100% - 1rem);
		// height: 4rem;
		margin-bottom: 1rem;
		display: flex;
		align-items: center;
	}

	.preview-box {
		margin-left: 1.44rem;
	}

	.preview-icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.preview-tetx {
		width: 1.5rem;
		height: 1.06rem;
		color: rgba(0, 0, 0, 0.5);
		font-size: 0.75rem;
		text-align: left;
		white-space: nowrap;
	}

	.publish-btn {
		margin-left: 1.94rem;
		width: 17.5rem;
		height: 3.06rem;
		line-height: 3.06rem;
		border-radius: 1.25rem;
		background-color: rgba(222, 134, 143, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 0.88rem;
		font-weight: 600;
		text-align: center;
	}
</style>